<template>
  <div>
    <el-dialog
      title="疾病"
      :visible.sync="addDiavisible"
      width="50%"
      @close="cancel"
      @opened="beforeopen"
    >
      <el-form
        ref="formRef"
        :rules="formRules"
        :model="form"
        label-width="110px"
      >
        <el-form-item
          label="疾病名称"
          prop="diseaseName"
          v-if="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].includes(form.diseaseIndex)"
        >
          <el-input v-model="form.diseaseName" disabled></el-input>
        </el-form-item>
        <el-form-item
          label="疾病名称"
          prop="diseaseName"
          v-if="[12].includes(form.diseaseIndex)"
        >
          <el-input v-model="form.diseaseName"></el-input>
        </el-form-item>
        <el-form-item label="疾病序号" prop="diseaseIndex">
          <el-select
            v-model="form.diseaseIndex"
            clearable
            @change="seChange"
            style="width: 100%"
          >
            <el-option
              v-for="item in diseaseIndex"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="确诊时间" prop="diseaseTime">
          <el-date-picker
            v-model="form.diseaseTime"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.diseaseDesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="addSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { inputValidator, selectValidator } from "@/utils/validate";
export default {
  data() {
    return {
      addDiavisible: false,
      form: {
        diseaseName: "",
        diseaseIndex: "",
        diseaseTime: "",
        diseaseDesc: "",
      },
      diseaseIndex: [
        { id: 1, name: "高血压" },
        { id: 2, name: "糖尿病" },
        { id: 3, name: "冠心病" },
        { id: 4, name: "慢性阻塞性肺疾病" },
        { id: 5, name: "恶性肿瘤" },
        { id: 6, name: "脑卒中" },
        { id: 7, name: "严重精神障碍" },
        { id: 8, name: "结核病" },
        { id: 9, name: "肝炎" },
        { id: 10, name: "其他法定传染病" },
        { id: 11, name: "职业病" },
        { id: 12, name: "其他" },
      ],
      formRules: {
        diseaseName: inputValidator,
        diseaseIndex: selectValidator,
        diseaseTime: inputValidator,
      },
    };
  },
  created() {},
  methods: {
    //关闭
    cancel() {
      for (let key in this.form) {
        this.form[key] = "";
      }
      this.addDiavisible = false;
    },
    beforeopen() {
      this.$refs.formRef.clearValidate();
    },
    //提交
    addSubmit() {
      this.$refs.formRef.validate((valid) => {
        if (!valid) return this.$message.error("请输入必填项!");
        var date = new Date(this.form.diseaseTime);
        this.form.diseaseTime =
          date.getFullYear() + "-" + this.monthChange(date.getMonth()) + "-" + date.getDate();
        this.$emit("transData", this.form);
        this.cancel();
      });
    },
    //供父组件调用函数
    openDialog() {
      this.addDiavisible = true;
    },
    seChange(value) {
      this.diseaseIndex.forEach((e) => {
        if (e.id == value) {
          this.form.diseaseName = e.name;
          if (e.id == 12) {
            this.form.diseaseName = "";
          }
        }
      });
    },
    monthChange(month){
      return month+1
    }
  },
};
</script>